<template>
   <div class="loginWrap">
      <h1 class="title">{{systemName}}</h1>
      <a-form
         :form="form"
         @submit="doLogin"
      >
         <a-form-item
            :wrapper-col="{span:12, offset:6}"
         >
            <a-input
               size="large"
               placeholder="请输入手机号"
               class="input"
               v-decorator="[
                  'userName',
                  { rules: fields['userName'].rules, initialValue : initForm.userName },
               ]"
            >
               <span slot="prefix" class="custom-prefix user"></span>
            </a-input>
         </a-form-item>
         <a-form-item
            :wrapper-col="{span:12, offset:6}"
         >
            <a-input
               size="large"
               placeholder="请输入密码"
               class="input"
               v-decorator="[
                  'password',
                  { rules:[{required:true, message:'请输入您的密码'}], initialValue : initForm.password }
               ]"
            >
               <span slot="prefix" class="custom-prefix pwd"></span>
            </a-input>
         </a-form-item>
         <a-form-item
            :wrapper-col="{ span: 12, offset: 6 }"
         >
            <a-button
               type="primary"
               html-type="submit"
            >
               登录
            </a-button>
         </a-form-item>
      </a-form>
   </div>
</template>

<script>
import { post } from '@/utils/http'
import { setCookie } from '@/utils/cookieUtils'
import { isMobile } from '@/utils/util'

export default {
   name: 'app',
   data () {
      return {
         form: this.$form.createForm(this),
         initForm: {
            userName: void (0),
            password: void (0)
         },
         fields: {
            userName: {
               rules: [
                  { required: true, message: '请输入手机号' },
                  {
                     validator: (rule, value, callback) => {
                        let warning
                        if (!value) {
                           warning = void (0)
                        }
                        if (value && !isMobile(value)) {
                           warning = '请输入正确的11位手机号码'
                        }
                        callback(warning)
                     }
                  }
               ]
            }
         }
      }
   },
   computed: {
      systemName () {
         return this.$store.state.setting.systemName
      }
   },
   methods: {
      // 登录
      doLogin (e) {
         e.preventDefault()
         this.form.validateFields((err, values) => {
            if (!err) {
               let requestData = {
                  username: this.form.getFieldValue('userName'),
                  password: this.form.getFieldValue('password')
               }
               post('/user/admin/login', requestData)
                  .then(res => {
                     this.$message.success('登录成功', 1)
                     setCookie('token', res.jwtToken, 1)
                     setCookie('entId', res.userInfo.entId, 1)
                     this.$router.push({ name: 'dashboard' })
                  })
                  .catch(err => {
                     this.$message.error(err)
                  })
            }
         })
      }
   }
}
</script>

<style lang="less" scoped>
.loginWrap {
   height: 100vh;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;

   .title {
      font-size: 34px;
      font-weight: bold;
      height: 49px;
      line-height: 49px;
   }

   /deep/ .ant-form {
      width: 100%;
   }

   /deep/ .ant-input {
      padding-left: 52px;
   }

   .input {
      .custom-prefix {
         width: 21px;
         height: 21px;
         display: block;
         margin-left: 5px;
         background-size: 100% 100%;

         &.user {
            background-image: url(../../assets/user.png);
         }

         &.pwd {
            background-image: url(../../assets/pwd.png);
         }
      }
   }

   button {
      width: 100%;
   }
}
</style>
